<template>
  <!-- 物品爆率列表 -->
  <div class="burst">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>世界管理</el-breadcrumb-item>
      <el-breadcrumb-item>物品爆率</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容区 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8" style="padding: 10px;">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入物品名称、描述或怪物名称来搜索"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="searchClear"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="4" style="padding: 10px;">
          <el-button type="primary" @click="addBurst">添加爆率</el-button>
        </el-col>
      </el-row>
      <!-- 爆率列表内容 -->
      <div class="burst-table">
        <el-table :data="burstList" border stripe style="width: 100%">
          <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
          <el-table-column
            prop="monsterdropid"
            label="编号"
            width="70"
            align="center"
          ></el-table-column>
          <el-table-column label="物品图鉴" width="100" align="center">
            <template slot-scope="props">
              <div v-if="props.row.item_icon">
                <el-image :src="path + props.row.item_icon">
                  <span slot="error">无物品图鉴</span>
                </el-image>
              </div>
              <div v-else>
                无物品图鉴
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物品名称" width="100">
            <template slot-scope="props">
              <div
                v-html="
                  $store.state.emphaKeyWord(props.row.item_name, searchCont)
                "
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="物品描述" width="200">
            <template slot-scope="props">
              <div
                v-html="
                  $store.state.emphaKeyWord(props.row.item_desc, searchCont)
                "
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="mob_img"
            label="掉落来源"
            width="200"
            align="center"
          >
            <template slot-scope="props">
              <div v-if="props.row.mob_img">
                <el-image :src="path + props.row.mob_img">
                  <span slot="error">无怪物图鉴</span>
                </el-image>
              </div>
              <div v-else>
                无怪物图鉴
              </div>
            </template>
          </el-table-column>
          <el-table-column label="来源名称">
            <template slot-scope="props">
              <div
                v-html="
                  $store.state.emphaKeyWord(props.row.mob_name, searchCont)
                "
              ></div>
            </template>
          </el-table-column>
          <el-table-column prop="chance" label="爆率基数（越大越低）">
          </el-table-column>
          <el-table-column prop="ban" label="禁止掉落">
            <template slot-scope="props">
              <div>
                <el-switch
                  style="display: block"
                  v-model="props.row.ban"
                  @change="changeDrop(props.row)"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="props">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editBurst(props.row.monsterdropid, props.row.mob_id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteBurst(props.row.monsterdropid)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.currentPage"
          :page-sizes="pageConfig.pageSizes"
          :page-size="pageConfig.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改爆率弹出层 -->
    <el-dialog
      title="修改爆率"
      :visible.sync="dialogConfig.dialogEditBurstVisible"
      class="edit-burst-dialog"
    >
      <el-form
        :model="editBurstForm"
        :rules="editBurstFormRules"
        ref="editBurstForm"
        class="demo-ruleForm"
        :label-position="'top'"
        label-width="80px"
      >
        <el-form-item label="爆率ID">
          <el-input v-model.trim="editBurstForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="物品名称" prop="itemName">
          <el-input v-model.trim="editBurstForm.itemName" disabled></el-input>
        </el-form-item>
        <el-form-item label="物品来源" prop="mobName">
          <el-input v-model.trim="editBurstForm.mobName" disabled></el-input>
        </el-form-item>
        <el-form-item label="爆率基数（越大则掉率越低）" prop="burstNum">
          <el-input v-model.trim="editBurstForm.burstNum"></el-input>
        </el-form-item>
        <div>
          <el-form-item style="text-align: right">
            <el-button
              @click="dialogConfig.dialogEditBurstVisible = false"
              style="margin-right: 15px;"
              >取消</el-button
            >
            <el-button type="primary" @click="editBurstSubmit('editBurstForm')"
              >确定</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 数值验证
var checkNum = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error('请输入大于等于0的整数'));
  } else {
    callback();
  }
};
export default {
  data () {
    return {
      // 搜索内容
      searchCont: '',
      // 爆率列表数据
      burstList: [],
      // 资源路径
      path: '',
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      },
      // 弹出层配置
      dialogConfig: {
        dialogEditBurstVisible: false
      },
      // 编辑爆率数据
      editBurstForm: {
        id: null, // id
        itemName: '',
        mobName: '',
        burstNum: ''
      },
      // 编辑爆率表单验证
      editBurstFormRules: {
        burstNum: [
          { required: true, message: '请输入爆率基数', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    getBurstList () {
      // 获取爆率列表
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/burstList', {
          params: {
            search: this.searchCont.trim(),
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize
          }
        })
        .then(res => {
          if (res.status === 0) {
            // 处理数据
            res.data.forEach(item => {
              if (item.ban === 1) {
                item.ban = true;
              } else {
                item.ban = false;
              }
            });
            // 设置分页
            this.pageConfig.pageTotal = res.total;
            this.pageConfig.currentPage = res.pagenum;
            // 设置数据
            this.burstList = res.data;
            this.path = res.path;
            // 判断当前页是否为空
            if (
              this.pageConfig.pageTotal ===
              (this.pageConfig.currentPage - 1) * this.pageConfig.pagesize
            ) {
              if (this.pageConfig.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.pageConfig.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    addBurst () {
      // 添加爆率
    },
    editBurst (id, mid) {
      // 修改爆率
      // 打开弹出层
      this.dialogConfig.dialogEditBurstVisible = true;
      // 根据ID查询爆率信息
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      // 发起请求
      this.$axios
        .get('/burst/' + id + '/' + mid)
        .then(res => {
          if (res.status === 0) {
            // 设置数据
            this.editBurstForm.id = res.data.monsterdropid;
            this.editBurstForm.itemName = res.data.item_name;
            this.editBurstForm.mobName = res.data.mob_name;
            this.editBurstForm.burstNum = res.data.chance;
          } else {
            // 请求错误消息
            this.$message.error(res.msg);
            // 关闭弹出层
            this.dialogConfig.dialogEditBurstVisible = false;
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
          // 关闭弹出层
          this.dialogConfig.dialogEditBurstVisible = false;
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editBurstSubmit (formName) {
      // 修改爆率提交
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          // 发起修改提交请求
          this.$axios
            .put('/burst/' + this.editBurstForm.id, {
              burstNum: this.editBurstForm.burstNum
            })
            .then(res => {
              if (res.status === 0) {
                // 提示成功信息
                this.$message.success(res.msg);
                // 关闭弹出层
                this.dialogConfig.dialogEditBurstVisible = false;
                // 重新刷新数据
                this.getBurstList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        }
      });
    },
    deleteBurst (id) {
      // 删除爆率
      // 调用确认框
      this.$confirm('你确定要删除该爆率吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          this.$axios
            .delete('/burst/' + id)
            .then(res => {
              if (res.status === 0) {
                // 提示成功信息
                this.$message.success(res.msg);
                // 重新刷新数据
                this.getBurstList();
              } else {
                // 提示失败信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        })
        .catch(() => {});
    },
    changeDrop (obj) {
      // 开关物品掉落
      var status = obj.ban ? 1 : 0;
      this.$axios
        .put('/burstStatus/' + obj.monsterdropid, {
          status: status
        })
        .then(res => {
          if (res.status === 0) {
            // 提示成功信息
            this.$message.success(res.msg);
          } else {
            // 提示失败信息
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        });
    },
    handleSizeChange (val) {
      // 切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getBurstList();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getBurstList();
    },
    searchClear () {
      this.pageConfig.currentPage = 1;
      this.getBurstList();
    }
  },
  mounted () {
    this.getBurstList();
  }
};
</script>

<style></style>
